
<template>
  <div class="fl personal-le">
    <div class="personal-top">
      <div class="sculpture-le">
        <div class="sculpture-img ta">
          <div class="tou-img pr">
            <img :src="imgUrl" alt="" />
            <div class="pa vip-box">VIP.2</div>
          </div>

          <div class="">
            <p class="surname">{{ userInfo.name }}</p>
            <p class="name-position">{{ userInfo.livenow }} | {{ userInfo.profession }}</p>
          </div>
        </div>

        <ul class="comment-ul clearfix">
          <li>
            <p>{{ userInfo.project_sum_comment_num }}</p>
            <p>评论</p>
          </li>
          <li>
            <p>{{ userInfo.fans_num }}</p>
            <p>粉丝</p>
          </li>
          <li>
            <p>{{ userInfo.project_sum_zan_num }}</p>
            <p>获赞</p>
          </li>
        </ul>
        <div class="overall-btn">
          <a @click="this.$router.push('/personaldata')">编辑个人资料</a>
        </div>
      </div>
    </div>
    <div class="personal-bot clearfix">
      <p class="personal-p">猜你喜欢</p>
      <ul class="personal-bot-ul">

        <li class="clearfix" v-for="item in designerListArr" :key="item.id">
          <div class="sculpture-le clearfix fl">
            <div class="fl sculpture-img">
              <a href="/designer"><img src="@/assets/img/1.png " alt="" /> </a>
              <div>
                <p class="surname">{{ item.name }}</p>
                <p class="name-position">苏州 | 平面设计师</p>
              </div>
            </div>
          </div>
          <div class="fr overall-btn">
            <a href="" class="storp-a"><i class="iconfont icon-shoucang"></i> 收藏</a>
          </div>
        </li>


      </ul>
    </div>
  </div>
</template>

<script>
import * as api from "@/api/users"

export default {
  data() {
    return {
      // 图片网址
      imgPath: 'https://ui-mall.oss-accelerate.aliyuncs.com/',

      // 图片路径
      imgName: "",

      // 用户信息
      userInfo: "",

      designerListArr: [],

    }
  },
  created() {
    this.getUserInfo()


    this.getDesignerList()
  },
  methods: {
    // 请求用户信息
    async getUserInfo() {
      try {
        let res = await api.UserInfoAPi()
        this.userInfo = res.data.data
        // console.log(this.userInfo);
        this.imgName = res.data.data.avatar
      } catch (e) {
        console.log(e);
      }
    },


    // 请求设计师列表
    async getDesignerList(per_page, page, name) {
      try {
        let res = await api.designerListApi(per_page, page, name)
        // console.log(res);
        this.designerListArr = res.data.data.data
        // console.log(this.designerListArr);
      } catch (e) {
        console.log(e);
      }
    }
  },
  computed: {
    imgUrl() {
      return this.imgPath + this.imgName
    }
  }
}
</script>

<style></style>